<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<link rel="stylesheet" type="text/css" href="/css/user.css">
	<link rel="stylesheet" type="text/css" href="/bower_components/cropper/dist/cropper.css">
	<script src="/js/imagecropper.js"></script>
	<style type="text/css">
		input[type="radio"]{
			opacity: 0;
		}
		.tag{
			list-style-type:none; 
			padding: 0px;
			display: block;
			overflow: hidden;
		}
		.tag li{
			width: 150px;
			height: 32px;
			text-align: center;
			line-height: 30px;
		}
		.on{
			background: url("../images/radio.png");
			background-position: 0px 0px;
			background-repeat: no-repeat;
			background-color: #DCDBDD;
			border-radius: 4px 4px;
		}
	</style>
</head>
<body>
	<% include head %>
	<div class="myself-top-head">
		<img src="/images/myselfTitle.png" class="myself-top-img">
	</div>
	<div class="container">
		<div class="row">
			<% include usermodle %>
			<div class="col-md-8  body-right ">
				<span class="body-right-titlesp"></span>
	  			<p class="body-right-title">&nbsp;&nbsp;video</p>
	  			<div class="myself-body-div">
	  				<div class="chf form-group" style="display: block;">
						<label for="exampleInputFile">选择你的视频文件 <span style=" color: rgb(224, 89, 208);">mp4</span></label>
						<input type="file" accept=".mp4" id="mp4File" name='mp4File'>
						<p class="help-block">从你的系统选择文件</p>
						<button class="button button-primary button-rounded button-small" id="tijiao">上传</button>
					</div>
					<div class="progress" style="display: block;">
						<div id="jin2" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition: 1s ;">
							<span class="sr-only">20% Complete (danger)</span>
						</div>
					</div>
	  				<div class="form-group" style="display:none;" id="chanceimg">
	  					<label for="exampleInputFile">选择封面</label>
						<button type="button" id="open_imgcro" class="btn btn-info active" data-toggle="modal" data-target="#myModal" >chance</button><br>
						<img id="showUpHead" src="../images/16-10.png">
	  				</div>
	  				<div class="form-group" id="formpost" style="display:none;">
	  					<div class="form-group">
							<label for="exampleInputPassword1">分类</label></br>
							<ul class="tag">
								<li data-tag="animation">动画</li>
								<li data-tag="technology">科技</li>
								<li data-tag="music">音乐</li>
								<li data-tag="food">美食</li>
								<li data-tag="game">游戏</li>
								<li data-tag="fashion">时尚</li>
								<li data-tag="tv">TV剧</li>
							</ul>
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">标题</label>
							<input type="text" class="form-control" id="vName" name="vName" placeholder="input video name">
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">简介</label>
							<input type="text" class="form-control" id="vInfo" name="vInfo" placeholder="input video info">
						</div>
						
						<div class="form-group">
							<button id="submit" type="submit" class="button button-glow button-rounded button-raised button-primary" style="display: block ;margin: 0px auto 20px auto;width: 100% ;">下一步</button>
						</div>
	  				</div>
	  			</div>
			</div>
		</div>
	</div>
	<% include foot %>
	<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title" id="myModalLabel">上传封面</h4>
				</div>
				<div class="modal-body">
					<a href="javascript:void(0);" id="article-img-a" class="thumbnail" style="margin:0px auto;width:100%;height: 500px; ">
					</a>
					<input id="img_file" type="file" accept="image/*" id="imgFile" name='imgFile'  onchange="selectImage(this);">	
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="article_save_img" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="/bower_components/cropper/dist/cropper.js"></script>
<script>
	// 'use strict';

	var imgPath = ''
	var videoPath = ''
	var bar = $('#jin2')
	var tag = ''
	$('.tag li').click(function(){
		$('.tag li').removeClass("on")
		$(this).addClass("on")
		tag = $(this).data('tag')
	})

	function selectImage(file) {
		if (!file.files || !file.files[0]) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function (evt) {
			$('#article-img-a').html('<img id="myimg" src="'+evt.target.result+'">');
			imageload(16,10,$("#myimg"));
			btnload();
		}
		reader.readAsDataURL(file.files[0]);
	}

    function btnload(){
		$("#article_save_img").on("click", function() {  
			var src = $image.eq(0).attr("src");  
			var canvasdata = $image.cropper("getCanvasData");  
			var cropBoxData = $image.cropper('getCropBoxData');
			convertToData(src, canvasdata, cropBoxData, function(basechar) {
				$('#showUpHead').attr("src", basechar);
				imgPath = basechar;
		    });
		})
	}

	$('#tijiao').click(function(){
		submit('mp4File')
	})

	function submit(fileType){
		var fileObj = document.getElementById(fileType).files[0];
		var forms = new FormData()
		forms.append("file", fileObj)
		var xhr = new XMLHttpRequest()
		xhr.open("post", '/ces', true);
		
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){  

				var b = xhr.responseText
				var st = JSON.parse(b)
				videoPath = st.videoPath
			}
		}
		xhr.onload = function () {

			$('#chanceimg').css({'display':'block'});

			$('#formpost').css({'display':'block'});

			setTimeout(function(){

				$('.chf').css({'display':'none'})

			},1000);

			status++;

		};

		xhr.upload.onprogress = function(evt){
			
			var su = parseInt(evt.loaded/evt.total * 100);
			
			bar.css({'width':su+'%'});
			
		}

		xhr.send(forms);
	}

	$('#submit').click(function(){
		var name = $('#vName').val()
		var info = $('#vInfo').val()
		if (name!='' && info!='' && imgPath!='' && videoPath!='' && tag!='') {
			$.ajax({
				url:'/user/videofile/ajaxInfo',
				type:'post',
				data:{
					'user':user,
					'imgPath':imgPath,
					'videoPath':videoPath,
					'vName':name,
					'vInfo':info,
					'tag':tag
				},
				success:function(data){
					window.location.href="/user"; 
				}
			})
		}
	})
</script>
</html>